import styles from './styles.less';
import {Pagination, Table} from 'antd';
import {useCallback, useEffect} from 'react';

import {connect} from 'umi';

const DataTable = (props) => {
  const {dispatch, dataTable, loading} = props;
  const {balances, tablePayload, setTablePayload} = props.data;

  /* 获取列表 */
  const fetchList = useCallback((payload) => {
    if (!payload.param.userId) {
      dispatch({
        type: 'PVipUserBalances/chgDataTable',
        payload: {total: 0, list: []}
      });
    } else {
      dispatch({
        type: 'PVipUserBalances/fetchList',
        payload: payload,
      });
    }
  }, [dispatch]);

  /* 查询监听 */
  useEffect(() => {
    fetchList({...tablePayload, param: {userId: balances ? balances.data.id : 0}});
  }, [fetchList, tablePayload, balances]);

  const columns = [
    {
      title: '序号',
      width: 70,
      align: 'center',
      render: ({}, {}, index) => (
        <span>
          {(tablePayload.pageNum - 1) * tablePayload.pageSize + index + 1}
        </span>
      ),
    },
    {
      title: '变动类型',
      dataIndex: 'flag',
      align: 'center',
      width: 130,
      render: (_, record) => {
        if (record.flag === 0) {
          return (
            <span style={{color: 'green'}}>加余额</span>
          );
        }
        if (record.flag === 1) {
          return (
            <span style={{color: 'orangered'}}>减余额</span>
          );
        }
      },
    },
    {
      title: '手机号码',
      dataIndex: 'userInfo',
      align: 'center',
      width: 130,
      render: (_, record) => {
        return (
          <span>{record.userInfo && record.userInfo.mobile ? record.userInfo.mobile : '-'}</span>
        );
      },
    },
    {
      title: '变动余额',
      dataIndex: 'amount',
      align: 'center',
      width: 130,
      render: (_, record) => {
        return (
          <span>￥{(record.amount / 100).toFixed(2)}</span>
        );
      },
    },
    {
      title: '之前余额',
      dataIndex: 'beforeAmount',
      align: 'center',
      width: 130,
      render: (_, record) => {
        return (
          <span>￥{(record.beforeAmount / 100).toFixed(2)}</span>
        );
      },
    },
    {
      title: '之后余额',
      dataIndex: 'afterAmount',
      align: 'center',
      width: 130,
      render: (_, record) => {
        return (
          <span>￥{(record.afterAmount / 100).toFixed(2)}</span>
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      align: 'center',
    },
    {
      title: '归属商家',
      dataIndex: 'mchInfo',
      align: 'center',
      render: (_, record) => {
        return (
          <span>{record.mchInfo ? record.mchInfo.name : '-'}</span>
        );
      },
    },
    {
      title: '备注信息',
      dataIndex: 'remark',
      align: 'center',
      render: (_, record) => {
        return (
          <span>{record.remark ? record.remark : '-'}</span>
        );
      },
    },
  ];

  return (
    <>
      <div className={styles.myDataTable}>
        <Table
          className={styles.myTable} bordered={false} size={'middle'} columns={columns}
          dataSource={dataTable.list} rowKey={'id'}
          pagination={false} scroll={{y: '100%'}} loading={loading}
        />
      </div>
      <Pagination
        pageSize={tablePayload.pageSize} current={tablePayload.pageNum} total={dataTable.total}
        className={styles.myPagination} size={'default'} hideOnSinglePage={false}
        showTotal={(total) => {
          return `共 ${total} 条记录`;
        }}
        pageSizeOptions={[10, 30, 60, 120]}
        showSizeChanger showQuickJumper={true}
        onChange={(page, pageSize) => {
          setTablePayload({...tablePayload, pageNum: page, pageSize: pageSize});
        }}
      />
    </>

  );
};

export default connect(({loading, PVipUserBalances}) => {
  return {
    loading: loading.effects['PVipUserBalances/fetchList'],
    dataTable: PVipUserBalances.dataTable,
  };
})(DataTable);
